<template>
  <div style="padding: 20px">
    <el-form label-width="100px" v-if="editingStep">
      <el-form-item v-if="business.BF_IsCaseFlow">
        <el-button
          type="primary"
          icon="el-icon-s-operation"
          @click="contributionProjectVis = true"
          plain
          v-if="editingStep.FLS_Type == 3 || editingStep.FLS_Type == 1"
        >
          贡献项配置（已绑定{{
            editingStep.ContributionProjects
              ? editingStep.ContributionProjects.length
              : 0
          }}项）
        </el-button>
      </el-form-item>
      <el-form-item label="名称" style="width: 300px">
        <el-input v-model="editingStep.FLS_Name" />
      </el-form-item>
      <el-form-item label="节点类型">
        <el-select disabled v-model="editingStep.FLS_Type">
          <el-option
            v-for="type in stepTypes"
            :key="type.EnumValue"
            :label="type.Description"
            :value="type.EnumValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <template v-if="editingStep.FLS_Type == 3 || editingStep.FLS_Type == 10">
        <el-form-item label="审批方式" v-if="editingStep.FLS_Type == 3">
          <el-select
            v-model="editingStep.FLS_PassType"
            @change="passTypeChange()"
          >
            <el-option
              v-for="type in passTypes"
              :key="type.EnumValue"
              :label="type.Description"
              :value="type.EnumValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="editingStep.FLS_Type == 3 ? '审批类型' : '抄送类型'"
        >
          <el-select
            v-model="editingStep.FLS_OperatorChoice"
            @change="opChoiceChange()"
          >
            <el-option
              v-for="choice in opChoices"
              :key="choice.FOC_Type"
              :label="choice.FOC_Name"
              :value="choice.FOC_Type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="多人审批"
          v-if="editingStep.FLS_Type == 3 && editingStep.FLS_OperatorChoice > 2"
        >
          <!-- FLS_OperatorChoice：1为发起人，2为指定人 -->
          <el-select
            v-model="editingStep.FLS_MultiOpPassType"
            @change="multiOpPassTypeChange()"
          >
            <el-option
              v-for="type in multiOpPassTypes"
              :key="type.EnumValue"
              :label="type.Description"
              :value="type.EnumValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指定人" v-if="editingStep.FLS_OperatorChoice == 2">
          <el-select
            v-model="editingStep.FLS_ChoiceID"
            :filterable="true"
            @change="
              choiceChange(
                emps.find((x) => x.ECV_TargetID == editingStep.FLS_ChoiceID)
                  .USR_Name
              )
            "
          >
            <el-option
              v-for="emp in emps"
              :key="emp.ECV_TargetID"
              :label="emp.USR_Name"
              :value="emp.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="角色"
          v-if="[3, 6, 9, 10].find((x) => x == editingStep.FLS_OperatorChoice)"
        >
          <el-select
            v-model="editingStep.FLS_ChoiceID"
            :filterable="true"
            @change="
              choiceChange(
                roles.find((x) => x.RL_ID == editingStep.FLS_ChoiceID).RL_Name
              )
            "
          >
            <el-option
              v-for="role in roles"
              :key="role.RL_ID"
              :label="role.RL_Name"
              :value="role.RL_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门"
          v-if="[5, 8].find((x) => x == editingStep.FLS_OperatorChoice)"
        >
          <el-select
            v-model="editingStep.FLS_ChoiceID"
            :filterable="true"
            @change="
              choiceChange(
                departments.find((x) => x.DPM_ID == editingStep.FLS_ChoiceID)
                  .DPM_Name
              )
            "
          >
            <el-option
              v-for="dpm in departments"
              :key="dpm.DPM_ID"
              :label="dpm.DPM_Name"
              :value="dpm.DPM_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核期限" v-if="editingStep.FLS_Type == 3">
          <el-input-number
            controls-position="right"
            v-model="editingStep.FLS_LimitDays"
            placeholder="进入该审核节点后几天内需完成"
            :min="0"
          ></el-input-number>
          天
        </el-form-item>
        <template v-if="editingStep.FLS_Type == 3">
          <div>
            <el-checkbox
              style="margin: 10px"
              v-model="editingStep.FLS_CheckOneTime"
            >
              当审核人已审核过该表单后，审批自动通过
            </el-checkbox>
          </div>
          <div>
            <el-checkbox
              style="margin: 10px"
              v-model="editingStep.FLS_CreatorAutoCheck"
            >
              当审核人为发起人，审批自动通过
            </el-checkbox>
          </div>
          <!-- <el-checkbox style="margin: 10px" v-model="editingStep.FLS_IsScore">
            是否计入内勤分数（该节点分数将计入案件内勤贡献率统计表中）
          </el-checkbox>
          <el-form-item label="分数" v-if="editingStep.FLS_IsScore">
            <div style="display: flex; align-items: center">
              <el-slider
                style="width: 200px"
                v-model="editingStep.FLS_Score"
                :min="0"
                :max="100"
              ></el-slider>
              <span style="margin-left: 10px">
                {{ editingStep.FLS_Score }}
              </span>
            </div>
          </el-form-item> -->

          <el-divider>通过时执行</el-divider>
          <el-form-item label-width="10px" v-if="stepActions">
            <el-table :data="editingStep.Actions">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column label="执行方法">
                <template slot-scope="scope">
                  <span>{{ scope.row.BFA_Name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="默认执行">
                <template slot-scope="scope">
                  <el-checkbox
                    v-if="scope.row.BFA_Type != 10"
                    v-model="scope.row.FLSA_DefaultChoose"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column width="100px">
                <template slot="header">
                  <el-button
                    type="text"
                    @click="addActionVis = true"
                    icon="el-icon-plus"
                  >
                    添加
                  </el-button>
                </template>
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-delete"
                    @click="doRemoveAction(scope.$index)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
      </template>
    </el-form>
    <el-dialog
      :visible.sync="contributionProjectVis"
      width="960px"
      title="贡献项配置"
      append-to-body
    >
      <contributionProjectSelection @choose="addContributionProject" />
      <div style="margin-top: 40px" v-if="editingStep.ContributionProjects">
        <el-divider>已绑定项</el-divider>
        <el-tag
          size="medium"
          v-for="(item, index) in editingStep.ContributionProjects"
          :key="index"
          closable
          @close="removeContributionProject(index)"
        >
          {{ item.CP_Name }}:{{ item.CP_Weight }}
        </el-tag>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="addActionVis"
      width="960px"
      title="添加执行方法"
      append-to-body
    >
      <el-table :data="stepActions">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="方法" width="260">
          <template slot-scope="scope">
            <span>{{ scope.row.BFA_Name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.BFA_Remark }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100px">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-plus"
              @click="doAddAction(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getStepTypes,
  getPassTypes,
  getOperatorChoices,
  getMultiOpPassType,
  getRoles,
  getEmployees,
  getDepartments,
} from '@/api/flowCenter/flow/flowProcess'
import contributionProjectSelection from '@/views/web/case/components/contributionProjectSelection.vue'
export default {
  props: ['editingStep', 'actions', 'business'],
  components: {
    contributionProjectSelection,
  },
  data: function () {
    return {
      stepTypes: [],
      passTypes: [],
      multiOpPassTypes: [],
      opChoices: [],
      roles: [],
      emps: [],
      departments: [],
      addActionVis: false,
      contributionProjectVis: false,
    }
  },
  computed: {
    stepType() {
      switch (this.editingStep.FLS_Type) {
        case 3:
          return '审批'
        case 10:
          return '抄送'
      }
    },
    stepActions() {
      if (this.editingStep.FLS_Position == 20)
        //分支,必须执行的方法需放在主干中
        return this.actions.filter((x) => x.BFA_Necessary != true)
      return this.actions
    },
  },
  methods: {
    multiOpPassTypeChange() {
      this.editingStep.MultiOpPassType = this.multiOpPassTypes.find(
        (x) => x.EnumValue == this.editingStep.FLS_MultiOpPassType
      ).Description
    },
    passTypeChange() {
      this.editingStep.PassType = this.passTypes.find(
        (x) => x.EnumValue == this.editingStep.FLS_PassType
      ).Description
    },
    opChoiceChange() {
      this.editingStep.FLS_ChoiceID = null
      this.editingStep.FLS_ChoiceDesc = null
      this.editingStep.FOC_Name = this.opChoices.find(
        (x) => x.FOC_Type == this.editingStep.FLS_OperatorChoice
      ).FOC_Name
    },
    choiceChange(desc) {
      this.editingStep.FLS_ChoiceDesc = desc
    },
    doAddAction(action) {
      if (!this.editingStep.Actions) {
        this.editingStep.Actions = []
      }
      if (this.editingStep.Actions.find((x) => x.BFA_ID == action.BFA_ID)) {
        return
      }
      this.editingStep.Actions.push(action)
    },
    doRemoveAction(index) {
      if (!this.editingStep.RemoveActions) {
        this.editingStep.RemoveActions = []
      }
      this.editingStep.RemoveActions.push(this.editingStep.Actions[index])
      this.editingStep.Actions.splice(index, 1)
    },
    addContributionProject(project) {
      if (!this.editingStep.ContributionProjects) {
        this.editingStep.ContributionProjects = []
      }
      if (
        this.editingStep.ContributionProjects.find(
          (x) => x.CP_ID == project.CP_ID
        )
      ) {
        this.$message('已存在')
        return
      }
      this.editingStep.ContributionProjects.push(project)
    },
    removeContributionProject(index) {
      if (!this.editingStep.RemoveContributionProjects) {
        this.editingStep.RemoveContributionProjects = []
      }
      this.editingStep.RemoveContributionProjects.push(
        this.editingStep.ContributionProjects[index]
      )
      this.editingStep.ContributionProjects.splice(index, 1)
    },
    doGetStepTypes() {
      getStepTypes().then(({ data }) => {
        this.stepTypes = data
      })
    },
    doGetOpChoices() {
      getOperatorChoices(this.editingStep.FLOW_BusinessID).then(({ data }) => {
        this.opChoices = data
      })
    },
    doGetPassTypes() {
      getPassTypes().then(({ data }) => {
        this.passTypes = data
      })
    },
    doGetMultiOpPassType() {
      getMultiOpPassType().then(({ data }) => {
        this.multiOpPassTypes = data
      })
    },
    doGetEmp() {
      getEmployees().then(({ data }) => {
        this.emps = data
      })
    },
    doGetRole() {
      getRoles().then(({ data }) => {
        this.roles = data
      })
    },
    doGetDepartments() {
      getDepartments().then(({ data }) => {
        this.departments = data
      })
    },
  },
  mounted() {
    this.doGetStepTypes()
    this.doGetOpChoices()
    this.doGetPassTypes()
    this.doGetMultiOpPassType()
    this.doGetEmp()
    this.doGetRole()
    this.doGetDepartments()
  },
}
</script>
